<template>
	<div id="evaluate">
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" @click="goBack"></a>
			<h1 class="mui-title">{{title}}<span id="showxueqi"></span><span style="display: none;"><a class="mui-icon mui-icon-arrowdown"></a></span></h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mt0">
				<li class="mui-view-cell">
					<a class="mui-navigate-right full-a">
						<select class="mui-btn mui-btn-block" v-model="selected" @change="newPost">
							<option v-for="item in items" :value="item.GUID">{{item.XQMC}}</option>
						</select>
					</a>
				</li>
			</ul>
			<div class="datelist">
				<ul class="mui-table-view">
				</ul>
			</div>
			<div class="datelist">
				<ul class="mui-table-view">
				</ul>
			</div>
			<section>
				<div class="diva" id="round_chart1">

				</div>
				<div class="divb" id="round_chart2">

				</div>
			</section>
			<article>
				<p class="artinfo">综合素质总分<span class="average">{{ScoreCount}}</span></p>
				<p class="artinfo" v-for="list in lists">{{list.FirstNormBaseName}}<span class="average">{{list.FirstNormBaseScore}}</span></p>
				<p class="artinfo">绩点分<span class="average">{{PointAdditionalScore}}</span></p>
			</article>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		getSemester
	} from '@/service/getData'
	export default {
		data() {
			return {
				title: "",
				items: [],
				lists: [],
				selected: "",
				XH: "",
				ScoreCount: "",
				PointAdditionalScore: ""
			}
		},
		created() {
			let self = this;
			self.title = self.$route.params.name;
			self.XH = self.$route.params.id;
			//获取日期
			getSemester({}).then((res) => {
//				console.log(res);
				self.items = res.data;
				self.selected = res.data[0].GUID;
//				console.log(self.selected);
				self.drawLine();
			})
			//			获取学生评价结果

		},
		mounted() {
			//获取日期

		},
		methods: {
			//绘制图表
			drawLine() {
				//获取学生
				let self = this;
				axios({
					url: window.host + '/StatisticService/GetStudentEvaluation',
					method: 'post',
					data: {
						XH: self.XH,
						SemesterCode: self.selected //学期号
					},
					transformRequest: [function(data) {
						// Do whatever you want to transform the data
						let ret = ''
						for(let it in data) {
							ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
						}
						return ret
					}]
				}).then((res) => {
//					console.log(res);
					if(res.data.code == 1) {
						self.PointAdditionalScore = res.data.data.PointAdditionalScore; //绩点分
						self.IntegralScore = res.data.data.IntegralScore;
						self.ScoreCount = res.data.data.ScoreCount // 综合素质总分
						self.lists = res.data.data.FirstNormBaseList;
						// 绘制仪表板图 
						let datalist = res.data.data.FirstNormBaseList;
						let option = {
							title: {
								//						text: dataname,
								textStyle: {
									color: 'red',
									fontSize: '14'
								},
								x: 'center',
								y: 'bottom'
							},
							series: [{
								//			name: '业务指标',
								type: 'gauge',
								detail: {
									formatter: '{value}'
								},
								data: [{
									name: '素质总分'
								}],
								center: ['50%', '60%'], //仪表盘位置
								radius: '105%', //仪表盘弧度
								axisLine: { // 坐标轴线
									lineStyle: { // 属性lineStyle控制线条样式
										width: 15 //仪表盘线宽
									}
								}
							}]
						}
						let myChart = this.$echarts.init(document.getElementById('round_chart1'));
						option.series[0].data[0].value = res.data.data.ScoreCount;
						option.title.text = res.data.data.ScoreCount < 30 ? "素质差" : res.data.data.ScoreCount < 60 ? "素质好" : res.data.data.ScoreCount < 80 ? "素质高" : res.data.data.ScoreCount < 92 ? "素质很高" : res.data.data.ScoreCount < 100 ? "素质极高" : "很棒";
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						//绘制雷达图
						let optionb = {
							radar: [{
									center: ['50%', '70%'], //雷达图坐标位置
									radius: 80,
									name: {
										textStyle: {
											color: 'black'
										}
									},
								},

							],

							series: [{
									type: 'radar',
									itemStyle: {
										normal: {
											areaStyle: {
												type: 'default'
											}
										}
									},
									data: [{
										//									value: arr,
										label: {
											normal: {
												show: true, //显示分数
											}
										}

									}]
								},

							]
						}
						let myChartb = this.$echarts.init(document.getElementById('round_chart2'));
						let arr = [];
						for(var i = 0; i < res.data.data.FirstNormBaseList.length; i++) {
							arr.push(res.data.data.FirstNormBaseList[i].FirstNormBaseScore)
						}
						optionb.series[0].data[0].value = arr;

						optionb.radar[0].indicator = [{
								text: "基本素质",
								max: 100
							},
							{
								text: "专业素质",
								max: 100
							},
							{
								text: "文化素质",
								max: 100
							}
						];
						// 使用刚指定的配置项和数据显示图表。
						myChartb.setOption(optionb);
					} else if(res.data.code == 2) {
						mui.toast("获取学生所对应的评价卷失败！")
					}

				})
			},
			newPost() {
				let self = this;
//				console.log(self.selected);
				self.drawLine();
			}
		}
	}
</script>

<style scoped>
	.mui-navigate-right:after,
	.mui-push-right:after {
		right: 5px;
		color: #333;
	}
	
	.full-a {
		width: 100%;
		height: 100%;
		font-size: 24px;
	}
</style>